<template>
    <div class="login">
        <div class="login-content">
            <div class="login-item login-box">
                <i><el-icon><HelpFilled /></el-icon></i>
                <p>软件平台</p>
            </div>
            <div class="login-item login-box">
                <i><el-icon><Tools /></el-icon></i>
                <p>软件平台</p>
            </div>

            <div class="login-form login-item" :class="{'is-login': isLoginForm}">
                <p class="login-title" v-if="isLoginForm">电量智能监控系统 - 登录</p>
                <p class="login-title" v-else>电量智能监控系统 - 注册</p>
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="用户名" prop="user">
                        <el-input v-model="ruleForm.user" />
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" />
                    </el-form-item>

                    <el-form-item v-if="!isLoginForm" label="确认密码" prop="confirmPassword">
                        <el-input type="password" v-model="ruleForm.confirmPassword" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" @click="submitForm">{{ isLoginForm ? '登录' : '注册' }}</el-button>
                        <el-button @click="toggleForm">{{ isLoginForm ? '注册' : '登录' }}</el-button>
                    </el-form-item>
                </el-form>
            </div> 
            <div class="login-item login-box">
                <i><el-icon><Grid /></el-icon></i>
                <p>软件平台</p>
            </div>
            <div class="login-item login-box">
                <i><el-icon><TrendCharts /></el-icon></i>
                <p>软件平台</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import {
    HelpFilled,
    Tools,
    Grid,
    TrendCharts,
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const ruleFormRef = ref(null);
const ruleForm = reactive({
    user: '',
    password: '',
    confirmPassword: '', // Add confirmPassword for registration
});
const isLoginForm = ref(true); // Control the form switch

const users = ref(getUsersFromStorage()); // Get users from storage

const rules = reactive({
    user: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 8, message: '长度3-8位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度6-18位', trigger: 'blur' },
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: (rule, value, callback) => {
            if (value !== ruleForm.password) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        }, trigger: 'blur' },
    ],
});

function toggleForm() {
    isLoginForm.value = !isLoginForm.value;
}

async function submitForm(formEl) {
    if (isLoginForm.value) {
        // Login logic
        const user = users.value.find(u => u.user === ruleForm.user && u.password === ruleForm.password);
        if (user) {
            router.push('/home');
        } else {
            console.error('用户名或密码错误');
        }
    } else {
        // Registration logic
        if (users.value.some(u => u.user === ruleForm.user)) {
            console.error('用户名已存在');
            return;
        }
        users.value.push({ user: ruleForm.user, password: ruleForm.password });
        saveUsersToStorage(users.value);
        router.push('/home');
    }
}

function getUsersFromStorage() {
    const users = localStorage.getItem('users');
    return users ? JSON.parse(users) : [];
}

function saveUsersToStorage(users) {
    localStorage.setItem('users', JSON.stringify(users));
}
</script>